<template>
  <div class="search-header">
    <el-space>
      <el-select v-model="selectValue" placeholder="select">
        <el-option label="全部" value=""></el-option>
        <el-option
          v-for="item in categoryOptions"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-input v-model="searchVal"></el-input>
      <el-button @click="getTableList">查询</el-button>
    </el-space>
  </div>
  <div class="production-container">
    <el-table
      :header-cell-style="headerRowStyle"
      :cell-style="{ textAlign: 'center' }"
      :data="computedTableDate"
      style="width: 90%; margin: 0 auto"
      max-height="540"
    >
      <el-table-column type="index" label="Date" width="80" />
      <el-table-column label="产品">
        <template #default="scope">
          <el-image
            :src="scope.row.img1"
            preview-teleported
            :preview-src-list="[
              scope.row.img1,
              scope.row.img2,
              scope.row.img3,
              scope.row.img4
            ]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        :filters="filters"
        :filter-method="filterHandler"
        label="分类"
        prop="category"
      >
      </el-table-column>
      <el-table-column prop="proname" label="名称"></el-table-column>
      <el-table-column prop="brand" label="品牌"></el-table-column>
      <el-table-column
        prop="originprice"
        sortable
        label="原价"
      ></el-table-column>
      <el-table-column prop="discount" sortable label="折扣"></el-table-column>
      <el-table-column prop="sales" sortable label="销量"></el-table-column>
      <el-table-column label="是否售卖">
        <template #default="scope">
          <el-switch
            v-model="scope.row.issale"
            :active-value="1"
            :inactive-value="0"
            class="ml-2"
            @change="handleChange(scope.row.proid, 'issale', scope.row.issale)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isseckill"
            :active-value="1"
            :inactive-value="0"
            class="ml-2"
            @change="
              handleChange(scope.row.proid, 'isseckill', scope.row.isseckill)
            "
          />
        </template>
      </el-table-column>
      <el-table-column label="是否推荐">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isrecommend"
            :active-value="1"
            :inactive-value="0"
            class="ml-2"
            @change="
              handleChange(
                scope.row.proid,
                'isrecommend',
                scope.row.isrecommend
              )
            "
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!--  -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableDate.length"
      v-model:page-size="pageSize"
      v-model:current-page="currentPage"
      @current-change="handleCurrentPage"
    />
  </div>
</template>
<script>
import { getCategory, searchPro } from '@/api/production.js'
export default {
  data() {
    return {
      headerRowStyle: {
        color: 'rgba(0,0,0,0.85)',
        fontWeight: '700',
        fontSize: '14px',
        textAlign: 'center',
        background: '#f8f8f8',
        height: '60px',
        borderRight: '1px solid #f0f0f0',
        transition: 'background .3s ease'
      },
      currentPage: 1, //页码,
      tableDate: [],
      total: 1,
      pageSize: 10,
      categoryOptions: [],
      selectValue: [],
      searchVal: ''
    }
  },
  created() {
    this.getgetCategory()
  },
  methods: {
    //获取全部分类
    getgetCategory() {
      getCategory().then((res) => {
        this.categoryOptions = res.data
      })
    },
    //点击查询
    getTableList() {
      searchPro({
        category: this.selectValue,
        search: this.searchVal
      }).then((res) => {
        this.tableDate = res.data
      })
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    //修改秒杀操作
    handleChange(proid, type, flag) {
      updateProductionFlag({
        proid,
        type,
        flag: !!flag
      }).then(() => {
        // console.log(type, flag, proid)
        // console.log('请求成功')
      })
    },
    handleCurrentPage() {
      this.getTableList()
    }
    //请求数据
  },

  computed: {
    computedTableDate() {
      return this.tableDate.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      )
    },
    filters() {
      let arr = this.computedTableDate.map((item) => item.category)
      arr = [...new Set(arr)]
      return arr.map((item) => {
        return {
          value: item,
          text: item
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.production-container {
  height: 100%;
  background: #fff;
  padding: 24px;
}
.el-pagination {
  justify-content: flex-end;
  margin-top: 32px;
}
</style>
